<script>
import headerPage from "@/components/headerPage.vue";
import {getHot, searchEnterprises} from "@/api";
import router from "@/router";

export default {
  name: "searchPage",
  props: {},
  components: {
    headerPage
  },
  data() {
    return {
      // 加载状态
      loading: true,
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 2, // 每页的数据条数
      secrchparams: {
        pageNum: 1,
        pageSize: 10,
        companyName: ''
      },
      tableData: {
        reserveFund: '',
        socialSecurity: '',
        weekendsClosed: ''
      },
      companyName: '',
    }
  },
  created() {
    this.getSearchList()
  },
  methods: {
    getSearchList() {
      this.tableData = this.$route.params.data
      this.total = this.tableData.length
      this.tableData.forEach(item => {
        if (item.reserveFund == 1) {
          item.reserveFund = '有公积金'
        } else {
          item.reserveFund = '无公积金'
        }
        // 社保  1有 2无
        if (item.socialSecurity == 1) {
          item.socialSecurity = '有社保'
        } else {
          item.socialSecurity = '无社保'
        }
        //   weekendsClosed 单双休情况 1 双2单 3 大小
        if (item.weekendsClosed == 1) {
          item.weekendsClosed = '双休'
        } else if (item == 2) {
          item.weekendsClosed = '单休'
        } else {
          item.weekendsClosed = '单双休'
        }
        //加班情况  overtimesSituation 1根据项目加班 2经常强制加班 3不加班
        //   weekendsClosed 单双休情况 1 双2单 3 大小
        if (item.overtimesSituation == 1) {
          item.overtimesSituation = '根据项目加班'
        } else if (item.overtimesSituation == 2) {
          item.overtimesSituation = '经常强制加班'
        } else {
          item.overtimesSituation = '不加班'
        }
      })
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    onSearch() {
      // 空值全查
      if (this.companyName === '') {
        getHot().then(res => {
          if (this.$route.name === "searchPage") {
            return res.data
          } else {
            this.$router.push({
              name: "searchPage",
              params: {
                data: res.data.list
              }
            })
          }
        })
      } else {
        this.secrchparams.companyName = this.companyName
        searchEnterprises(this.secrchparams).then(res => {
          this.tableData = res.data.list
          this.tableData.forEach(item => {
            if (item.reserveFund == 1) {
              item.reserveFund = '有公积金'
            } else {
              item.reserveFund = '无公积金'
            }
            // 社保  1有 2无
            if (item.socialSecurity == 1) {
              item.socialSecurity = '有社保'
            } else {
              item.socialSecurity = '无社保'
            }
            //   weekendsClosed 单双休情况 1 双2单 3 大小
            if (item.weekendsClosed == 1) {
              item.weekendsClosed = '双休'
            } else if (item == 2) {
              item.weekendsClosed = '单休'
            } else {
              item.weekendsClosed = '单双休'
            }
            //加班情况  overtimesSituation 1根据项目加班 2经常强制加班 3不加班
            //   weekendsClosed 单双休情况 1 双2单 3 大小
            if (item.overtimesSituation == 1) {
              item.overtimesSituation = '根据项目加班'
            } else if (item.overtimesSituation == 2) {
              item.overtimesSituation = '经常强制加班'
            } else {
              item.overtimesSituation = '不加班'
            }
          })
          if (res.code === 2001) {
            this.companyName = ''
            // 跳转页面
            if (this.$route.name === "searchPage") {
              return 0
            } else {
              this.$router.push({
                name: "searchPage",
                params: {
                  data: res.data
                }
              })
            }
          }
        })
      }
    },
    goclick(row) {
      console.log(row)
      let routeUrl = router.resolve({
        path: '/detailPage',
        query: row,
      })
      window.open(routeUrl.href, '_blank');
    },
  }
}
</script>

<template>
  <div class="box">
    <headerPage style="background-color: #0454ac;"></headerPage>
    <div class="secrchBox">
      <!--热门搜索盒子-->
      <div class="hotSearch" style="height: 40px">
        <a-input-search v-model="companyName" placeholder="请输入查询企业"
                        enter-button="搜索企业" size="large"
                        @search="onSearch(companyName)"/>
      </div>
    </div>
    <div class="main">
      <!--搜索的企业  如果有相关公司的话 展示-->
      <div class="whiteBox  fatherBox heightBox">
        <!--单个盒子 进行渲染 页面-->
        <div style="">
          <el-table style="min-height: 500px" @cell-click="goclick" :data="tableData">
            <el-table-column @cell-click="goclick" label="公司名称" align="center" prop="companyName"/>
            <el-table-column label="所属地区" align="center" prop="localArea"/>
            <el-table-column label="加班情况" align="center" prop="overtimesSituation"/>
            <el-table-column label="有无公积金" align="center" prop="reserveFund"/>
            <el-table-column label="有无社保" align="center" prop="socialSecurity"/>
            <el-table-column label="休息制度" align="center" prop="weekendsClosed"/>
            <el-table-column label="详情描述" align="center" prop="detailedDescription"/>
          </el-table>
          <div class="pageBox">
            <el-pagination
                v-show="total>0"
                :total="total"
                :page.sync="secrchparams.pageNum"
                :limit.sync="secrchparams.pageSize"
            />
          </div>
        </div>
      </div>
      <!-- 分页器-->
    </div>
  </div>
</template>

<style scoped lang="scss">
.pageBox {
  width: 500px;
  margin: auto;
  margin-top: 10px;
}

.secrchBox {
  width: 1248px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.hotSearch {
  height: 40px;
  line-height: 40px;
  background-color: white;
  width: 1000px;
}

::v-deep .el-table td.el-table__cell div {
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heightBox {
  min-height: 500px;
}

.littleBox:nth-child(odd) {
  background-color: #f9fafc;
}

//奇数行
.littleBox:nth-child(even) {

  background: #99a9bf;
}

//偶数行
.littleBox {
  line-height: 25px;
  //margin-bottom: 10px;
  width: 33%;
}

.oneBox {
  display: flex;
  //width: 33%;
}

.flexBox {
  display: flex;
}

.radios {
  border-radius: 10px;
}

.whiteBox {
  padding: 10px;
  background-color: white;
}

header {
  margin-bottom: 20px;

  .title {
    font-size: 20px;
  }
}

.main {
  //width: 1080px;
  width: 70%;
  height: 800px;
}

.box {
  //padding: 20px;
  background-color: whitesmoke;
  margin: 0 auto;
}

.paddingBox {
  padding: 10px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

// 鼠标经过颜色改为天蓝色
::v-deep .el-table__body tr:hover > td {
  cursor: pointer;
  //color: blue;
}

// 点击行更改颜色  如果没有效果 需要给el-table  加上  highlight-current-row ，默认false
.el-table__body tr.current-row > td {
  color: #ccc;
  background-color: #66b1ff !important;

}

</style>
